<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./OL_SDK/include-openlayers-local.js"></script>
    <script src="./libs/gaode.js"></script>
    <script src="./utils/Query.js"></script>
    <script src="./utils/setMarkerStyle.js"></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
</head>

<body>
    <input type="text" id="input">
    <div id="map">
    </div>
    <script>
        var docLayer = new Zondy.Map.Doc("", "zxd-plus-pla", {

        })
        var map = new ol.Map({
            target: "map",
            layers: [gaode, docLayer],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        /* 1、给输入框回车事件-获取要素 */
        $("#input").keydown(function (evt) {
            if (evt.key == "Enter") {
                var value = $(this).val();
                let service = {
                    name: "zxd-plus-pla",
                    layerId: 2
                }
                Query.queryByAttr({
                    keyword: value,
                    service,
                    callback: handleSuccess
                })
            }
        })
        /* 设置高亮图层 */
        const high_source = new ol.source.Vector({

        })
        const high_layer = new ol.layer.Vector({
            source: high_source,
            style:setMarkerStyle('/images/位置.png')
        })
        map.addLayer(high_layer);
        function handleSuccess(data) {
            /* 
            1、查询到的值高亮
            2、没有值弹窗-alert
             */
            var format = new Zondy.Format.PolygonJSON();
            //将MapGIS要素JSON反序列化为ol.Feature类型数组
            var features = format.read(data);
            console.log(features)
            if (features) {
                high_source.addFeatures(features)
            } else {
                alert("数据库中没有对应的要素")
            }
        }
    </script>
</body>

</html>